<template>
    <a-comment>
        <template #actions>
            <span key="comment-basic-like">
                <a-tooltip title="Like">
                    <template v-if="action === 'liked'">
                        <LikeFilled @click="like" />
                    </template>
                    <template v-else>
                        <LikeOutlined @click="like" />
                    </template>
                </a-tooltip>
                <span style="padding-left: 8px; cursor: auto">
                    {{ likes }}
                </span>
            </span>
            <span key="comment-basic-dislike">
                <a-tooltip title="Dislike">
                    <template v-if="action === 'disliked'">
                        <DislikeFilled @click="dislike" />
                    </template>
                    <template v-else>
                        <DislikeOutlined @click="dislike" />
                    </template>
                </a-tooltip>
                <span style="padding-left: 8px; cursor: auto">
                    {{ dislikes }}
                </span>
            </span>
            <span key="comment-basic-reply-to">Reply to</span>
        </template>
        <template #author>
            <a>Han Solo</a>
        </template>
        <template #avatar>
            <a-avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />
        </template>
        <template #content>
            <p>
                We supply a series of design principles, practical patterns and high quality design
                resources (Sketch and Axure).123
            </p>
        </template>
        <template #datetime>
            <a-tooltip :title="dayjs().format('YYYY-MM-DD HH:mm:ss')">
                <span>{{ dayjs().fromNow() }}</span>
            </a-tooltip>
        </template>
        <a-comment>
            <template #actions>
                <span>Reply to</span>
            </template>
            <template #author>
                <a>Han Solo</a>
            </template>
            <template #avatar>
                <a-avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />
            </template>
            <template #content>
                <p>
                    We supply a series of design principles, practical patterns and high quality design
                    resources (Sketch and Axure).456
                </p>
            </template>
        </a-comment>
        <a-comment>
            <template #actions>
                <span>Reply to</span>
            </template>
            <template #author>
                <a>Han Solo</a>
            </template>
            <template #avatar>
                <a-avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />
            </template>
            <template #content>
                <p>
                    We supply a series of design principles, practical patterns and high quality design
                    resources (Sketch and Axure).789
                </p>
            </template>
        </a-comment>
        <a-comment>
            <template #avatar>
                <a-avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />
            </template>
            <template #content>
                <a-form-item>
                    <a-textarea v-model:value="value" :rows="2" placeholder="输入评论"/>
                </a-form-item>
                <a-form-item>
                    <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit">
                        Add Comment
                    </a-button>
                </a-form-item>
            </template>
        </a-comment>
    </a-comment>


</template>
<script setup>
import dayjs from 'dayjs';
import { ref } from 'vue';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
const likes = ref(0);
const dislikes = ref(0);
const action = ref();
const like = () => {
    likes.value = 1;
    dislikes.value = 0;
    action.value = 'liked';
};
const dislike = () => {
    likes.value = 0;
    dislikes.value = 1;
    action.value = 'disliked';
};
</script>